<template>
  <view>
    <Header type="back" />
    <view class="w-100" :class="'h' + bar_height"></view>
    <view class="w-100 h80">
      <view class="w-100 f-b-c h80">
        <view
          class="w-50 re h80 f-c-c ty-nav-li"
          @click="nav_change(item)"
          v-for="(item, index) in serve"
          :key="item.code"
          :class="item.code == nav_code ? 'bg-f8ff' : ''"
        >
          <!-- 左边边角显示 选中并且不能是第一个  -->
          <HornMargin
            type="left-bottom"
            :width="44"
            :height="40"
            v-if="item.code == nav_code && index != 0"
          />
          <view class="t-b font32 font600">{{ item.title }}</view>
          <!-- 右边边角显示  选中并且不能是最后一个 -->
          <HornMargin
            type="right-bottom"
            :width="44"
            :height="40"
            v-if="item.code == nav_code && index != serve.length - 1"
          />
        </view>
      </view>
    </view>

    <view
      class="w-100 h1356 bg-f8ff re"
      :class="nav_code == 'other' ? 'ty-invalid' : 'ty-use'"
      :style="'height:' + height + 'rpx'"
    >
      <view class="w-100 re h-100">
        <scroll-view
          class="scroll-view_H uni-scroll"
          scroll-y="true"
          @scrolltolower="lower"
          :lower-threshold="200"
        >
          <List :list="order_list" :type="nav_code"></List>
          <view
            class="w-100 t-a font24 t-4 pb-1"
            v-if="is_loading && order_list.length > 0"
            >没有更多了</view
          >
          <view class="w-100 t-a font24 t-3 pt-12 pb-1" v-else>暂无数据</view>
          <view class="w-100 h180"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import Header from "../../../components/header.vue";
import HornMargin from "../../../components/horn_margin.vue";

import List from "./components/list.vue";

import { my_order_list } from "../../../api/order.js";

export default {
  components: {
    Header,
    HornMargin,
    List,
  },
  data() {
    return {
      height: 0,
      bar_height: 0,
      serve: [
        { title: "门票订单", code: "TICKET" },
        { title: "路线订单", code: "LINE" },
        { title: "工坊订单", code: "WORKSHOP" },
        { title: "其他订单", code: "other" },
      ],
      nav_code: "TICKET",
      is_loading: false,
      order_list: [],
      query: {
        currentPage: 1,
        orderType: "TICKET", // 订单类型 TICKET：票务/ACTIVITY：活动/YEAR_CARD：年卡/MALL：商城/FOOD：餐饮/MAP：地图/LINE：路线,
        pageSize: 10,
        orderTypeListStr: "",
      },
      order_type: "",
    };
  },
  created() {
    const { statusBarHeight, screenHeight } = uni.getStorageSync("systemInfo");
    let top = statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度
    let toprpx = top + 80 + 20; // 100为 header 20 为间距
    this.bar_height = toprpx; //顶部高度

    let height = screenHeight / (uni.upx2px(100) / 100);
    this.height = height - (top + 100 + 80); //其他页面使用的高度
  },
  onLoad(val) {
    this.order_type = val;
    if (val.type) {
      this.set_type(val.type);
      this.get_order_list();
    }
  },
  onShow() {
    if (this.order_type.type) {
      this.set_type(this.order_type.type);
      this.get_order_list();
    } else {
      let order_code = uni.getStorageSync("order_code");
      this.set_type(order_code);
      this.get_order_list();
    }
  },
  methods: {
    set_type(type) {
      switch (type) {
        case "TICKET":
        case "LINE":
        case "WORKSHOP":
          this.query.orderType = type;
          this.nav_code = type;
          break;
        default:
          this.query.orderType = "";
          this.nav_code = "other";
          this.query.orderTypeListStr =
            "ACTIVITY,MALL,FOOD,MAP,YEAR_CARD,COUPON";
          break;
      }
      uni.setStorageSync("order_code", this.nav_code);
    },
    nav_change(e) {
      this.nav_code = e.code;
      this.query.orderType = e.code;
      this.order_list = [];
      this.query.currentPage = 1;
      this.query.orderTypeListStr = "";
      //订单类型 TICKET：票务/ACTIVITY：活动/YEAR_CARD：年卡/MALL：商城/FOOD：餐饮/MAP：地图/LINE：路线/WORKSHOP：工坊,可用
      if (e.code == "other") {
        this.query.orderType = "";
        this.query.orderTypeListStr = "ACTIVITY,MALL,FOOD,MAP,YEAR_CARD,COUPON";
      }
      uni.setStorageSync("order_code", this.nav_code);
      this.get_order_list();
    },
    // 我的订单
    async get_order_list() {
      const { code, body } = await my_order_list(this.query);
      if (code === "0") {
        body?.records?.map((item) => {
          item.goodsInfo = JSON.parse(item.goodsJson);
          item.goodsName = item.goodsInfo?.itemList[0]?.goodsName;
          item.totalNum = item.goodsInfo?.totalNum;
          item.thumbnail = item.goodsInfo?.itemList[0]?.thumbnail;
        });
        console.log("body.records", body.records);

        this.order_list = [...body.records];

        const { records, current, pages } = body;
        // 当前页大于总页 显示没有更多了
        if (current >= pages) {
          this.is_loading = true;
        } else {
          this.is_loading = false;
        }
      }
    },
    // 上啦加载
    lower() {
      if (!this.is_loading) {
        this.query.currentPage += 1;
        this.get_order_list();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ty-nav-li {
  border-radius: 32rpx;
  &.bg-f8ff {
    border-radius: 32rpx 32rpx 0 0;
    .t-b {
      color: #000000;
    }
  }
}
.ty-use {
  border-radius: 0 80rpx 0 0;
}
.ty-used {
  border-radius: 80rpx 80rpx 0 0;
}
.ty-invalid {
  border-radius: 80rpx 0 0 0;
}

.scroll-view_H {
  position: absolute;
  top: 40rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
</style>
